/<template>
  <div>
    <ul>
      <li v-for="(item,index) in list" :key="index">
        <h1 :style="{background:`rgb(${210-30*index},${107-40*index},${217-70*index})`}">{{item.title}}</h1>
        <List :list='item.children'></List>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name:'List',
    props:{
        list:Array,
    }
}
</script>

<style>
  ul{
    padding: 0 20px;
  }
  h1{
    background: #09f;
  }
</style>